<template>
	<view class="viewport">
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="详情" color="#fff" @leftClick="leftClick"
			@rightClick="rightClick">
			<fui-icon color="#fff" name="arrowleft"></fui-icon>
		</fui-nav-bar>

		<view class="warp">

			<view class="port">
				<view class="ul" v-for="v of 3" @click="particulars">
					<view class="title">设备报修205245</view>
					<view class="li">
						<span class="left">设备名称</span>
						<span>bx-20224648</span>
					</view>
					<view class="li">
						<span class="left">设备编号</span>
						<span>bx-20224648</span>
					</view>
					<view class="li" style="display: flex;justify-content: space-between;">
						<view class="">
							<span class="left">存放位置</span>
							<span>bx-20224648</span>
						</view>
						<view class="">
							<view class="audit">维修中</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const leftClick = () => {
		uni.navigateBack()
	};
	const rightClick = () => {};
	const screen = () => {
		uni.navigateTo({
			url: '/subpkg_index/malfunctionRepair/audit'
		});
	};
	//去详情页
	const particulars = () => {
		uni.navigateTo({
			url: '/subpkg_index/malfunctionRepair/particulars'
		});
	};
</script>

<style lang="scss" scoped>
	.warp {
		height: 100%;
		// background-color: #f6f6f6;
		font-family: Arial, Helvetica, sans-serif;
		padding-bottom: 150rpx;

		.head {
			display: flex;
			background-color: #fff;
			padding: 20rpx;

			.ipt {
				flex: 1;
				margin-left: 25rpx;
			}

			.screen {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}

		.port {
			.ul {
				margin-top: 24rpx;
				border-bottom: 2rpx solid #e8e8e8;
				background-color: #fff;
				padding: 0 30rpx;
				padding-bottom: 20rpx;
				.title {
					color: #0052d9;
					font-size: 35rpx;
					font-weight: 600;
					height: 80rpx;
					line-height: 80rpx;
				}

				.li {
					color: #ccc;
					height: 50rpx;
					line-height: 50rpx;

					.left {
						color: #000;
						margin-right: 30rpx;
					}
					
					.audit {
						border-radius: 25rpx;
						border: 1rpx solid #0052d9;
						height: 48rpx;
						width: 120rpx;
						display: flex;
						font-size: 28rpx;
						color: #0052d9;
						align-items: center;
						justify-content: space-around;
					}
				}

				.footer {
					display: flex;
					height: 80rpx;
					align-items: center;
					justify-content: space-between;

					.audit {
						border-radius: 25rpx;
						border: 1rpx solid #0052d9;
						height: 48rpx;
						width: 120rpx;
						display: flex;
						font-size: 28rpx;
						color: #0052d9;
						align-items: center;
						justify-content: space-around;
					}
				}
			}
		}
	}
</style>